<template>
  <div class="main">
    <div class="top">
      <img src="../../assets/领云教务top.png" alt="" />
    </div>
    <div class="info">
      <div class="infoLeft">
        <img src="../../assets/lyage.png" alt="" />
      </div>
      <div class="infoRight">
        <div class="infoadd">
          <div class="infoaddb">账号登陆</div>
          <div class="infoadda">
            <el-form
              :model="ruleForm"
              status-icon
              ref="form"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item prop="username">
                <el-input
                  type="text"
                  v-model="ruleForm.username"
                  autocomplete="off"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('form')"
                  style="width: 300px"
                  >登陆</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <h3>云教务系统@</h3>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    //   var validatePass = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入账号'));
    //     } else {
    //       if (this.ruleForm.checkPass !== '') {
    //         this.$refs.ruleForm.validateField('username');
    //       }
    //       callback();
    //     }
    //   };
    //   var validatePass2 = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入密码'));
    //     }  else {
    //       callback();
    //     }
    //   };
    return {
      ruleForm: {
        username: "",
        pass: "",
      },
      // rules: {
      //   username: [
      //     { validator: validatePass, trigger: 'blur' }
      //   ],
      //   pass: [
      //     { validator: validatePass2, trigger: 'blur' }
      //   ],

      // }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(
              "http://www.eshareedu.cn/edusystems/api/admin/checklogin",
              this.ruleForm
            )
            .then((res) => {
              if (res.data.errCode == "10000") {
                this.$message.success("登陆成功，即将进入后台。。。");
                //   登陆成功后用$router push 进行跳转 用setTimeout定时器增加用户体验度
                setTimeout(() => {
                  this.$router.push("/indexs");
                }, 3000);
                //进入后台后把token 存入sessionStorage中
                window.sessionStorage.setItem("token", res.data.data.token);
              } else {
                this.$message.error("用户名或密码错误");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 800px;
  background-color: rgb(238, 244, 245);
}
.top {
  height: 60px;
  background-color: #fff;
}
.top img {
  margin-left: 20px;
  width: 13%;
  margin-top: 0.5%;
}
.info {
  height: 600px;
  margin-top: 15px;
  /* background-color: bisque; */
  display: flex;
}
.info img {
  width: 800px;
  height: 500px;
  margin-left: 100px;
}
.infoRight {
  width: 600px;
  height: 600px;
  margin-left: 130px;
  /* background-color: rgb(83, 179, 218); */
}
.infoadd {
  width: 80%;
  height: 500px;
  margin: auto 0;
  background-color: #fff;
}
.infoadda {
  margin-top: 40px;
  padding-top: 20px;
}
.demo-ruleForm {
  width: 400px;
}
.infoaddb {
  width: 88px;
  height: 30px;
  font-weight: bold;
  font-size: 22px;
  /* background-color: lightsteelblue; */
  margin: auto;
  padding-top: 50px;
}
.el-form-item {
  margin-bottom: 38px;
}

.bottom h3 {
  text-align: center;
}
.bottom {
  width: 100%;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  font-weight: bold;
  font-size: 30px;
  margin-top: 8%;
}
</style>